import $ from "jquery";
import "./css/my.css";//要./开头
/*
    注意:如果要通过路径的形式去引入node_modules中相关的文件,可以直接省略路径前面的
    node_modules这一层目录,直接写包的名称,然后后面跟上具体的文件路径
    不写node_modules这一层目录默认就会去node_modules里面找
 */
import "bootstrap/dist/css/bootstrap.css";


$(function(){
    $("li:odd").css("backgroundColor","red");
});

class Person{ //class是es6的语法
    static info = {name:"lujieni",age:20} //使用static关键字,可以定义静态属性
}
console.log(Person.info); //访问Person类身上info静态属性
/*
    在webpack中,默认只能处理一部分es6的新语法,一些更高级的es6语法或者es7语法,
    webpack是处理不了的;这时候就需要借助于第三方的loader来帮助webpack处理这些
    高级的语法,当第三方loader把高级语法转为低级的语法之后,会把结果交给webpack去
    打包到bundle.js中

    通过babel可以帮我们将高级的语法转换为低级的语法
    1.在webpack中,可以运行如下两套命令,去安装babel相关的loader功能:
        1.1 第一套包: npm i babel-core babel-loader babel-plugin-transform-runtime -D 转换器
        1.2 第二套包: npm i babel-preset-env babel-preset-stage-0 -D    语法的对应关系
    2.打开webpack的配置文件,在module节点下的rules数组中,添加一个新的匹配规则:
        2.1 {test:/\.js$/,use:"babel-loader",exclude:/node_modules/}
        2.2 注意:在配置babel的loader规则的时候,必须把node_modules目录通过exclude选项排除掉:原因有俩:
            2.2.1 如果不排除node_modules,则babel会把node_modules中所有的第三方js文件都打包编译,这样
            会非常消耗cpu,同时打包速度非常慢;
            2.2.2 哪怕最终babel把所有node_modules中的js转换完毕,但是项目也无法正常运行!
    3.在项目的根目录中,新建一个叫做.babelrc的babel配置文件,这个配置文件属于json格式
        3.1 在.babelrc写如下的配置:
            {
                "presets":["env","stage-0"],
                "plugins":["transform-runtime"]
            }
    4.了解:目前,我们安装的babel-preset-env是比较新的es语法,之前我们安装的是babel-preset-es-2015,现在出了一个
       更新的语法插件,叫做babel-preset-env,它包含了所有和es***相关的语法

 */